<template>
  <div>
    <el-row style="margin-top:20px">
      <el-col :span="9" :offset="8">
        <el-card>
          <el-col>
            <el-page-header @back="goBack" content="修改信息" style="font-weight: bolder"></el-page-header>
          </el-col>
          <el-col style="margin-top: 35px">
            <el-form label-position="right" ref="mainForm" label-width="auto" :model="userInfo">
              <el-form-item label="用户名" prop="name">
                <el-input readonly="readonly" v-model="userInfo.username"></el-input>
              </el-form-item>
              <el-form-item label="姓名" prop="name">
                <el-input v-model="userInfo.name"></el-input>
              </el-form-item>
              <el-form-item label="性别" prop="gender">
                <el-select v-model="userInfo.gender" placeholder="请选择性别" style="width:100%">
                  <el-option v-for="(item,index) in sex" :key="index" :label="item.key" :value="item.value"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="出生日期" prop="birthday">
                <el-date-picker
                  style="width:100%"
                  v-model="userInfo.birthday"
                  value-format="yyyy-MM-dd"
                  type="date"
                  placeholder="选择日期">
                </el-date-picker>
              </el-form-item>
              <el-form-item label="邮箱地址" prop="email">
                <el-input v-model="userInfo.email"></el-input>
              </el-form-item>
              <el-form-item label="联系方式" prop="mobile">
                <el-input v-model="userInfo.mobile"></el-input>
              </el-form-item>
            </el-form>
          </el-col>
          <el-col>
            <el-button round size="large " type="primary " icon="el-icon-lock" @click="edit()">确认编辑</el-button>
            <el-button round size="large " type="primary " icon="el-icon-lock" style="margin-left: 100px"
                       @click="reset()">重置信息
            </el-button>
          </el-col>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data () {
    return {
      sex: [{
        key: '男',
        value: 0
      }, {
        key: '女',
        value: 1
      }],
      userInfo: {},
    }
  },
  methods: {
    goBack () {
      this.$router.go(-1)
    },
    reset () {
      this.userInfo.name = ''
      this.userInfo.email = ''
      this.userInfo.birthday = ''
      this.userInfo.gender = 0
      this.userInfo.mobile = ''
    },
    edit () {
      this.$http({
        url: '/api/user/edit',
        method: 'post',
        data: {
          avatar: this.userInfo.avatar,
          birthday: this.userInfo.birthday,
          email: this.userInfo.email,
          gender: this.userInfo.gender,
          id: this.userInfo.id,
          mobile: this.userInfo.mobile,
          name: this.userInfo.name,
          nickname: this.userInfo.nickname,
          roleId: this.userInfo.roleId,
          roleName: this.userInfo.roleName,
          username: this.userInfo.username,
        }
      }).then((res) => {
        if (res.data.code === 200) {
          this.$message({
            type: 'success',
            showClose: true,
            message: '修改信息成功',
            center: true,
            duration: 2000,
            onClose: () => {
              //同步vuex
              this.$store.commit('changeUser', { user: this.userInfo })
              this.$router.push('/details')
            }
          })
        } else {
          //1.清空表单
          this.$refs.mainForm.resetFields()
          //2.输出错误信息
          this.$message({
            type: 'warning',
            showClose: true,
            message: res.data.message,
            center: true,
          })
        }
      })
    },
    iniUser () {
      this.userInfo = JSON.parse(JSON.stringify(this.$store.state.user))
    }
    ,
  },
  created () {
    this.iniUser()
  }
}
</script>
<style scoped>
.el-card {
  height: 570px;
  width: 550px;
}
</style>
